基于网页实现RTMP流的web直播(监控)实现(利用树莓派ffmpeg实现推流)

2024-07-16 05:29| 来源: 网络整理| 查看: 265

1、Linux上nginx-rtmp服务器的搭建 https://blog.csdn.net/qq_43556844/article/details/113543670 2、在树莓派上安装ffempg https://blog.csdn.net/qq_43556844/article/details/113571991 在树莓派中的 ffmpeg 推流命令（将-t 10删除，则会一直进行推流）

ffmpeg -ss 0 -t 10 -i /dev/video0 -f flv rtmp://(ip):(端口)/(nginx服务器应用)/(自定义应用)

配置后将网页放在nginx服务器的html文件夹中就可以访问。若有公网IP的话，将网页放在本地，而访问流的ip改成公网ip就行(即以下的file)。我的nginx目录为/usr/local/src/nginx/html/

基于jwplayer直播页面demo(该例子需要flash插件的支持，下面介绍一种h5下的实现)

demo 网页直播测试 var server = window.location.hostname; var stream_url = 'rtmp://' + server + '/hls' + '/live_stream'; //或者直接输入'rtmp://ip:1935/hls/live_stream', // mylive 对应nginx.conf配置项application的名字 // live_stream 对应Adobe Flash Stream Media Live Encoder配置的stream名称 var thisPlayer; //保存当前播放器以便操作 $(function() { thisPlayer = jwplayer('container').setup({ flashplayer: 'jwplayer.flash.swf', file: 'stream_url', width: 500, height: 350, //autostart: true, //如果打开此标志，在打开网页时会自动播放直播流 }); //播放暂停 $('.player-play').click(function() { if (thisPlayer.getState() != 'PLAYING') { thisPlayer.play(true); this.value = '暂停'; } else { thisPlayer.play(false); this.value = '播放'; } }); //停止 $('.player-stop').click(function() { thisPlayer.stop(); }); //状态 $('.player-status').click(function() { var state = thisPlayer.getState(); var msg; switch (state) { case 'BUFFERING': msg = '加载中...'; break; case 'PLAYING': msg = '正在播放'; break; case 'PAUSED': msg = '暂停'; break; case 'IDLE': msg = '停止'; break; } alert(msg); }); //获取进度 $('.player-current').click(function() { alert(thisPlayer.getPosition()); }); //获取视频长度 $('.player-length').click(function() { alert(thisPlayer.getDuration()); }); });

实现demo下载：https://download.csdn.net/download/qq_43556844/14990898

基于video.js的直播demo Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。对于video.js 5版本以下，可以直接调用video.js即可，而对于video.js 6以及以上版本需要再调用videojs-flash.js才可以播放rtmp流。

基于video.js实现rtmp流的直播 // 当浏览器不支持HTML5播放器的时候自动唤起flash播放器 videojs.options.flash.swf = 'video-js.swf'; var player = videojs('player'); //player为页面video元素的id player.play(); //播放

实现demo下载：https://download.csdn.net/download/qq_43556844/14990907

【本文地址】

公司简介

联系我们